<template>
  <div class="page">
    <h1>首页</h1>
    <div class="nav">
      <dl @click="tiaoa()">
        <dt>{{ this.list.userCount }}</dt>
        <dd class="el-icon-user-solid">用户总数</dd>
      </dl>
      <dl @click="tiaob()">
        <dt>{{ this.list.productCount }}</dt>
        <dd class="el-icon-shopping-bag-1">商品总数</dd>
      </dl>
      <dl @click="tiaoc()">
        <dt>{{ this.list.orderCount }}</dt>
        <dd class="el-icon-document">订单总数</dd>
      </dl>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.yonghu();
  },
  methods: {
    yonghu() {
      this.axios.get("/api/manage/statistic/base_count.do").then((res) => {
        this.list = res.data.data;
      });
    },
    tiaoa() {
      this.$router.push({ path: "/home/consumer" });
    },
    tiaob() {
      this.$router.push({ path: "/home/commodity" });
    },
    tiaoc() {
      this.$router.push({ path: "/home/orderform" });
    },
  },
};
</script>
<style scoped lang="less">
.page {
  width: 100%;
}
.page h1 {
  margin-top: 20px;
  margin-left: 20px;
}
.nav dl {
  width: 30%;
  height: 180px;
  margin-top: 30px;
  float: left;
  margin-left: 2.5%;
  color: #fff;
}
.nav dl:hover {
  color: #000;
  transition: all 1.5s ease 0s;
  transform: scale(1.1);
}
.nav dl dt {
  width: 100%;
  font-size: 2.1875rem;
  text-align: center;
  margin-top: 30px;
}
.nav dl dd {
  width: 100%;
  text-align: center;
  margin-top: 40px;
}
.nav dl:nth-child(1) {
  background: #f0b45f;
}
.nav dl:nth-child(2) {
  background: #6cbe6c;
}
.nav dl:nth-child(3) {
  background: #5db8d3;
}
</style>